<template>
  <div>
     <Row>
        <input v-model="uId" placeholder="玩家Id" ></input>
        <input v-model="gameId" placeholder="游戏id" ></input>
        <Button type="primary" @click="onSearch">查询</Button>
    </Row>
    <Table :border="true" :stripe="true" :show-header="true" :height="500" :width="1400" :data="tableData" :columns="tableColumns"></Table>
    <Page class="bottom-page" :total="totalPage" :current="crtPage" :page-size="pageSize" show-total show-elevator @on-change="onChange"></Page>
    <ShowHalloweenRecordsModal :showHModal="showHalloweenModal" v-on:closeHalloweenModel="onCloseHalloweenModal" :recordData="halloweenData"></ShowHalloweenRecordsModal>
    <ShowWildAfricaRecordsModal :showWAModal="showWildAfricaModal" v-on:closeWildAfricaModal="onCloseWildAfricaModal" :recordData="wildAfricData"></ShowWildAfricaRecordsModal>
    <ShowBountyHunterRecordsModal :showBHModal="showBountyHunterModal" v-on:closeBountyHunterModal="onCloseBountyHunterModal" :recordData="bountyHunteData"></ShowBountyHunterRecordsModal>
    <ShowMysticalTotemRecordsModal :showMTModal="showMysticalTotemModal" v-on:closeMysticalTotemModal="onCloseMysticalTotemModal" :recordData="mysticalTotemData"></ShowMysticalTotemRecordsModal>
    <ShowWarofTheDragonRecordsModal :showWTDModal="showWarofTheDragonModal" v-on:closeWarofTheDragonModal="onCloseWarofTheDragonModal" :recordData="warofTheDragonData"></ShowWarofTheDragonRecordsModal>
    <ShowFourHolyBeastsRecordsModal :showFHBModal="showFourHolyBeastsModal" v-on:closeFourHolyBeastsModal="onCloseFourHolyBeastsModal" :recordData="fourHolyBeastsData"></ShowFourHolyBeastsRecordsModal>
    <ShowJackBeanRecordsModal :showJBModal="showJackBeanModal" v-on:closeJackBeanModal="onCloseJackBeanModal" :recordData="jackBeanData"></ShowJackBeanRecordsModal>
    <ShowLovelyPuppiesRecordsModal :showLPModal="showLovelyPuppiesModal" v-on:closeLovelyPuppiesModal="onCloseLovelyPuppiesModal" :recordData="lovelyPuppiesData"></ShowLovelyPuppiesRecordsModal>
    <ShowChineseFuRecordsModal :showCFModal="showChineseFuModal" v-on:closeChineseFuModal="onCloseChineseFuModal" :recordData="chineseFuData"></ShowChineseFuRecordsModal>
    <ShowWildFireRecordsModal :showWFModal="showWildFireModal" v-on:closeWildFireModal="onCloseWildFireModal" :recordData="wildFireData"></ShowWildFireRecordsModal>
    <ShowMaYaRecordsModal :showMYModal="showMaYaModal" v-on:closeMaYaModal="onCloseMaYaModal" :recordData="mayaData"></ShowMaYaRecordsModal>
  </div>
</template>
<script>

import {getRoleSlotLogs} from '@/api/game.js'
import {getVO} from '@/common/proto-vo.js'
import ShowHalloweenRecordsModal from './ShowHalloweenRecordsModal.vue'
import ShowWildAfricaRecordsModal from './ShowWildAfricaRecordsModal.vue'
import ShowBountyHunterRecordsModal from './ShowBountyHunterRecordsModal.vue'
import ShowMysticalTotemRecordsModal from './ShowMysticalTotemRecordsModal.vue'
import ShowWarofTheDragonRecordsModal from './ShowWarofTheDragonRecordsModal.vue'
import ShowFourHolyBeastsRecordsModal from './ShowFourHolyBeastsRecordsModal.vue'
import ShowJackBeanRecordsModal from './ShowJackBeanRecordsModal.vue'
import ShowLovelyPuppiesRecordsModal from './ShowLovelyPuppiesRecordsModal.vue'
import ShowChineseFuRecordsModal from './ShowChineseFuRecordsModal.vue'
import ShowWildFireRecordsModal from './ShowWildFireRecordsModal.vue'
import ShowMaYaRecordsModal from './ShowMaYaRecordsModal.vue'
export default {
  data () {
    return {
      uId: '',
      gameId: '',
      crtPage: 1,
      totalPage: 0,
      pageSize: 10,
      showHalloweenModal: false,
      showWildAfricaModal: false,
      showBountyHunterModal: false,
      showMysticalTotemModal: false,
      showWarofTheDragonModal: false,
      showFourHolyBeastsModal: false,
      showJackBeanModal: false,
      showLovelyPuppiesModal: false,
      showChineseFuModal: false,
      showWildFireModal: false,
      showMaYaModal: false,
      tableData: [],
      halloweenData: {},
      wildAfricData: {},
      bountyHunteData: {},
      mysticalTotemData: {},
      warofTheDragonData: {},
      fourHolyBeastsData: {},
      jackBeanData: {},
      lovelyPuppiesData: {},
      chineseFuData: {},
      wildFireData: {},
      mayaData: {}
    }
  },
  created () {
    this.onSearch()
  },
  methods: {
    onSearch () {
      let tgameId = 2
      if (this.gameId !== '') {
        tgameId = parseInt(this.gameId)
      }

      let tUid = ''
      if (this.uId !== '') {
        tUid = this.uId
      }
      console.log('tUid:', tUid, ',gameId:', tgameId, ',pageSize:', this.pageSize, ',pageSize:', this.pageSize)
      getRoleSlotLogs(tUid, tgameId, this.crtPage, this.pageSize).then((data) => {
        if (!data) {
          return
        }
        this.tableData = []
        let RoleSlotLogVO = getVO('RoleSlotLogVO')
        let pv = data.data.data
        let len = pv.data.length
        for (let i = 0; i < len; i++) {
          let vo = RoleSlotLogVO.decode(pv.data[i])
          vo.id = vo.id.toNumber()
          vo.beforePoint = vo.beforePoint.toNumber()
          vo.winPoint = vo.winPoint.toNumber()
          vo.afterPoint = vo.afterPoint.toNumber()
          vo.usePonts = Math.abs(vo.afterPoint - vo.winPoint - vo.beforePoint)
          this.tableData.push(vo)
        }
        this.totalPage = pv.intValues[1]
        console.log(this.tableData)
      })
    },
    onCloseHalloweenModal () {
      this.showHalloweenModal = false
    },
    onCloseWildAfricaModal () {
      this.showWildAfricaModal = false
    },
    onCloseBountyHunterModal () {
      this.showBountyHunterModal = false
    },
    onCloseMysticalTotemModal () {
      this.showMysticalTotemModal = false
    },
    onCloseWarofTheDragonModal () {
      this.showWarofTheDragonModal = false
    },
    onCloseFourHolyBeastsModal () {
      this.showFourHolyBeastsModal = false
    },
    onCloseJackBeanModal () {
      this.showJackBeanModal = false
    },
    onCloseLovelyPuppiesModal () {
      this.showLovelyPuppiesModal = false
    },
    onCloseChineseFuModal () {
      this.showChineseFuModal = false
    },
    onCloseWildFireModal () {
      this.showWildFireModal = false
    },
    onCloseMaYaModal () {
      this.showMaYaModal = false
    },
    onChange (item) {
      console.log(item)
      this.crtPage = item
      this.onSearch()
    }
  },
  components: {
    ShowHalloweenRecordsModal, ShowWildAfricaRecordsModal, ShowBountyHunterRecordsModal, ShowMysticalTotemRecordsModal, ShowWarofTheDragonRecordsModal, ShowFourHolyBeastsRecordsModal, ShowJackBeanRecordsModal, ShowLovelyPuppiesRecordsModal, ShowChineseFuRecordsModal, ShowWildFireRecordsModal, ShowMaYaRecordsModal
  },
  computed: {
    tableColumns () {
      let cols = [
        {
          title: 'id',
          key: 'id',
          align: 'left'
        },
        {
          title: '时间',
          key: 'createTime',
          align: 'left'
        },
        {
          title: '玩家id',
          key: 'userId',
          width: 300,
          align: 'left'
        },
        {
          title: '游戏',
          key: 'gameStr',
          width: 80,
          align: 'left'
        },
        {
          title: '类型',
          key: 'type',
          width: 80,
          align: 'left'
        },
        {
          title: '前金币',
          key: 'beforePoint',
          align: 'left'
        },
        {
          title: '使用金币',
          key: 'usePonts',
          align: 'left'
        },
        {
          title: '获胜金币',
          key: 'winPoint',
          align: 'left'
        },
        {
          title: '后金币',
          key: 'afterPoint',
          align: 'left'
        },
        {
          title: '操作',
          key: 'records',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    let idx = params.index
                    let recordData = this.tableData[idx]
                    console.log('records', recordData.records, 'gameId', recordData.gameId)
                    if (recordData.gameId === 2) {
                      this.halloweenData = recordData.records
                      this.showHalloweenModal = true
                      console.log('this.showHalloweenModal = true')
                    } else if (recordData.gameId === 3) {
                      this.wildAfricData = recordData.records
                      this.showWildAfricaModal = true
                      console.log('this.showWildAfricaModal = true')
                    } else if (recordData.gameId === 4) {
                      this.bountyHunteData = recordData.records
                      this.showBountyHunterModal = true
                      console.log('this.showBountyHunterModal = true')
                    } else if (recordData.gameId === 5) {
                      this.mysticalTotemData = recordData.records
                      this.showMysticalTotemModal = true
                      console.log('this.showMysticalTotemModal = true')
                    } else if (recordData.gameId === 6) {
                      this.warofTheDragonData = recordData.records
                      this.showWarofTheDragonModal = true
                      console.log('this.showWarofTheDragonModal = true')
                    } else if (recordData.gameId === 7) {
                      this.fourHolyBeastsData = recordData.records
                      this.showFourHolyBeastsModal = true
                      console.log('this.showFourHolyBeastsModal = true')
                    } else if (recordData.gameId === 8) {
                      this.jackBeanData = recordData.records
                      this.showJackBeanModal = true
                      console.log('this.showJackBeanModal = true')
                    } else if (recordData.gameId === 9) {
                      this.lovelyPuppiesData = recordData.records
                      this.showLovelyPuppiesModal = true
                      console.log('this.showLovelyPuppiesModal = true')
                    } else if (recordData.gameId === 10) {
                      this.chineseFuData = recordData.records
                      this.showChineseFuModal = true
                      console.log('this.showChineseFuModal = true')
                    } else if (recordData.gameId === 13) {
                      this.wildFireData = recordData.records
                      this.showWildFireModal = true
                      console.log('this.showMaYaModal = true')
                    } else if (recordData.gameId === 11) {
                      this.mayaData = recordData.records
                      this.showMaYaModal = true
                      console.log('this.showMaYaModal = true:  this.mayaData:', this.mayaData)
                    }
                  }
                }
              }, '结果显示')
            ])
          }
        },
        {
          title: '游戏记录',
          key: 'gameRecord',
          align: 'left',
          render: (h, params) => {
            console.log(h, params)
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    let vo = this.tableData[params.index]
                    this.$Modal.info({
                      title: '游戏记录',
                      content: vo.gameRecord,
                      width: 1500,
                      height: 1000
                    })
                  }
                }
              }, '详细信息')
            ])
          }
        }
      ]
      return cols
    }
  }
}

</script>

<style scoped>
.log-str{
  font-size: 14px;
  margin-bottom: 2px;
}
.content{
  min-height: 460px;
}
.bottom-page{
  margin-top: 5px;
  margin-bottom: 10px;
  float: right;
}
</style>
